<template>
  <a-modal
    :ok="false"
    :okButtonProps="{ props: { disabled: disableSubmit } }"
    class="add-area-modal"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    wrapClassName="system-modals"
    style="top: 5%; height: 85%; overflow-y: hidden"
    :destroyOnClose="true"
    :footer="null"
    :maskStyle="{ background: 'rgba(1, 21, 24, 0.8)' }"
    :centered="true"
    :maskClosable="false"
    :closable="false"
  >
    <div class="modalHeader">
      <slot name="header">
        <div class="modalTitle">{{ title }}</div>
        <div @click="handleCancel" class="modalClose"><img src="@/assets/imgs/close.png" alt="" /></div>
      </slot>
    </div>

    <div class="modalCotent">
      <a-spin :spinning="confirmLoading">
        <a-form :form="form" autocomplete="off">
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="区域名称" :hidden="false" hasFeedback>
            <a-input
              id="departName"
              placeholder="请输入区域名称"
              :maxLength="30"
              v-decorator="['departName', validatorRules.departName]"
            />
          </a-form-item>
          <a-form-item v-if="show" :labelCol="labelCol" :wrapperCol="wrapperCol" label="国家编码">
            <a-input
              placeholder="请输入国家编码"
              :maxLength="30"
              v-decorator="['nationCode', validatorRules.nationCode]"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :hidden="seen" label="上级区域" hasFeedback>
            <a-tree-select
              style="width: 100%"
              :dropdownStyle="{ maxHeight: '200px', overflow: 'auto' }"
              :treeData="departTree"
              v-model="model.parentId"
              placeholder="请选择上级区域"
              :disabled="condition"
            >
            </a-tree-select>
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="经度">
            <a-input placeholder="例如104.123456" v-decorator="['lng', validatorRules.lng]" />
            <img @click="showMap" class="select-map-img" src="@/assets/imgs/in-map.png" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="纬度">
            <a-input placeholder="例如34.865432" v-decorator="['lat', validatorRules.lat]" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="区域边界坐标">
            <a-input
              placeholder="例：lat:104.123456,lng:34.78908"
              v-decorator="['areaPosition', validatorRules.areaPosition]"
            />
            <img @click="createBorderLine" class="select-map-img" src="@/assets/imgs/map-area.png" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序">
            <a-input-number v-decorator="['departOrder', { initialValue: 0 }]" />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="区域简介">
            <a-input
              placeholder="请输入区域简介"
              :maxLength="30"
              v-decorator="['description', validatorRules.description]"
            />
          </a-form-item>
          <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="备注">
            <a-input placeholder="请输入备注" :maxLength="30" v-decorator="['memo', {}]" />
          </a-form-item>
        </a-form>
      </a-spin>
    </div>

    <div class="modalFooter">
      <slot name="footer">
        <div style="height: 60px">
          <a-button @click="handleCancel">取消</a-button>
          <a-button @click="handleOk">确定</a-button>
        </div>
      </slot>
    </div>
    <a-map :visible.sync="isShowMap" @border="getBorder" @getLatLong="getLatLong" ref="aMap"></a-map>
  </a-modal>
</template>

<script>
import { httpAction } from '@/api/manage'
// import { queryIdTree } from '@/api/api'
import pick from 'lodash.pick'
import ATextarea from 'ant-design-vue/es/input/TextArea'
import AMap from '@/components/a-map/index.vue'

export default {
  name: 'SysDepartModal',
  components: { ATextarea, AMap },
  data () {
    return {
      departTree: [],
      orgTypeData: [],
      phoneWarning: '',
      departName: '',
      title: '操作',
      seen: false,
      visible: false,
      condition: true,
      disableSubmit: false,
      model: {},
      menuhidden: false,
      menuusing: true,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },

      confirmLoading: false,
      form: this.$form.createForm(this),
      validatorRules: {
        departName: { rules: [{ required: true, message: '请输入区域名称!' }] },
        nationCode: { rules: [{ required: true, message: '请输入区域国家编码!' }] },
        lat: { rules: [{ required: true, message: '请输入纬度!' }] },
        lng: { rules: [{ required: true, message: '请输入经度!' }] },
        areaPosition: { rules: [{ required: true, message: '请输入区域边界坐标!' }] }
      },
      url: {
        add: '/sys/sysDepart/add'
      },
      dictDisabled: true,
      isShowMap: false,
      show: false
    }
  },
  created () { },
  methods: {
    // loadTreeData () {
    //   var that = this
    //   queryIdTree().then(res => {
    //     if (res.success) {
    //       that.departTree = []
    //       for (let i = 0; i < res.result.length; i++) {
    //         let temp = res.result[i]
    //         that.departTree.push(temp)
    //       }
    //     }
    //   })
    // },
    add (depart) {
      if (depart.key) {
        this.seen = false
        this.dictDisabled = false
      } else {
        this.seen = true
        this.dictDisabled = true
      }
      this.edit(depart.key, depart.orgType)
    },
    edit (record, orgType) {
      this.form.resetFields()
      this.model = Object.assign({}, {})
      this.visible = true
      if (orgType == 6) {
        this.show = false
      } else {
        this.show = true
      }
      this.loadTreeData()
      this.model.parentId = record != null ? record.toString() : null
      if (this.seen) {
        this.model.orgCategory = '1'
      } else {
        this.model.orgCategory = '2'
      }
      this.$nextTick(() => {
        this.form.setFieldsValue(
          pick(
            this.model,
            'departName',
            'nationCode',
            'centerPosition',
            'areaPosition',
            'departOrder',
            'description',
            'memo',
            'lng',
            'lat'
          )
        )
      })
    },
    close () {
      this.$emit('close')
      this.disableSubmit = false
      this.visible = false
    },
    handleOk () {
      const that = this
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let formData = Object.assign(this.model, values)
          //时间格式化
          console.log(formData)
          httpAction(this.url.add, formData, 'post')
            .then(res => {
              if (res.success) {
                that.$message.success(res.message)
                that.loadTreeData()
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
        }
      })
    },
    handleCancel () {
      this.close()
    },
    showMap () {
      this.isShowMap = true
    },
    getLatLong (value) {
      this.form.setFieldsValue({
        lng: value[0],
        lat: value[1]
      })
    },
    getBorder (value) {
      this.form.setFieldsValue({
        areaPosition: value
      })
    },
    createBorderLine () {
      this.$refs.aMap.borderLine = true
      this.isShowMap = true
    }
  }
}
</script>

<style lang="less" scoped>
.in-map {
  position: absolute;
  right: 10px;
  width: 20px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
.select-map-img {
  position: absolute;
  right: 0;
  width: 28px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

/deep/ .ant-modal-mask {
  background: rgba(0, 0, 0, 0.45) !important;
}
/deep/ .ant-modal-content {
  background: #fff;
  .ant-modal-body {
    padding: 0px;
  }
}
.modalHeader {
  position: relative;
  top: 0;
  left: 0;
  height: 0.9rem;
  line-height: 0.9rem;
  border-radius: 0.08rem 0.08rem 0px 0px;
  // background: url('~@/assets/imgs/headerImg.png') no-repeat center / 100% 100%;
  background: #b8dafb;
  .modalTitle {
    // position: absolute;
    // top: 60%;
    // left: 50%;
    // -webkit-transform: translate3d(-50%, -50%, 0);
    // transform: translate3d(-50%, -50%, 0);

    text-align: center;
    font-size: 0.16rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #000;
  }
  .modalClose {
    position: absolute;
    top: 0%;
    right: -5%;
    transform: translateY(-55%);
    font-size: 0.14rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #07a9bf;
    cursor: pointer;
    img {
      width: 0.4rem;
      height: 0.4rem;
    }
  }
}
.modalCotent {
  // background: #025071;
  background: #fff;
  padding: 0.2rem 0 0 0;
}
.modalFooter {
  height: 72px;
  text-align: center;
  border-radius: 0px 0px 0.08rem 0.08rem;
  // background: url('~@/assets/imgs/footerImg.png') no-repeat center / 100% 100%;
  background: #fff;
  .ant-btn {
    border: none;
    padding: 0 0.4rem;
  }
  .ant-btn:nth-child(1) {
    margin-right: 0.5rem;
    background: #f2f2f2;
    font-size: 0.14rem;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 0.2rem;
    color: #000;
  }
  .ant-btn:nth-child(2) {
    background: #1083f2;
    font-size: 0.14rem;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 0.2rem;
    color: #fff;
  }
}
</style>
